<template>
	<view class="content">
		<!-- F1: 状态栏 -->
		<myStatusbar />
		<!-- F2: 自定义导航栏 -->
		<uni-nav-bar
			backgroundColor="#090"
			color="#FFF"
			title="缴费记录"
			leftIcon="back"
			leftText="返回"
			@clickLeft="goBack"
		/>
		<!-- F3: 下拉菜单： 数据拾取器 -->
		<!-- 
		mode 数据拾取器的模式
		 time 时间  date 日期  region 地区(只能在小程序下使用)
		 selector  普通选择器  multiSelector  多列选择器
		range  设置拾取器的数据
		 -->
		<view>
			<picker 
				mode="selector"
				:range="feeTypes"
				class="picker"
				@change="feeTypeChange"
			>
				<view class="picker-content">
					<text class="txt">{{feeTypes[curFeeType]}}</text>
					<uni-icons type="bottom" />
				</view>
			</picker> 
			<!-- fields 设置选择器的粒度，显示到哪一部分 -->
			<picker
				mode="date"
				class="picker"
				fields="month"
				@change="monthChange"
			>
				<view class="picker-content">
					<text class="txt">{{curMonth}}</text>
					<uni-icons type="bottom" />
				</view>
			</picker> 
		</view>
		<!-- 缴费记录列表 -->
		<uni-card 
			:title="item.type | feeType"
			:extra="'￥'+Math.abs(item.amount).toFixed(2)"
			:thumbnail="item.type | feeTypeIcon"
			padding="0"
			class="record"
			v-for="item in records"
			:key="item.fid"
		>
			<uni-list class="record-content">
				<uni-list-item 
					title="缴费状态"
					rightText="交易成功"
				/>
				<uni-list-item
					title="缴费用户"
					:rightText="item.householdId"
				/>
				<uni-list-item
					title="缴费时间"
					:rightText="item.generatedTime | formatDate"
				/>
			</uni-list>
		</uni-card>
		<!-- 没有缴费记录才会显示 -->
		<!-- v-show 是否显示 -->
		<text class="no-record" v-show="records.length===0">
			--- 没有相关记录 ---
		</text>
	</view>
</template>

<script>
	import { feeRecord } from '../../service'
	export default {
		data() {
			return {
				feeTypes: ['全部类型','水费','电费','燃气费','物业费','停车费','宽带费'],
				curFeeType: 0,  // 保存缴费类型的下标
				curMonth: '选择月份',
				records: [],   // 保存缴费记录
			}
		},
		onLoad() {
			// 请求缴费记录
			this.requestFeeRecord()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			feeTypeChange(event) {
				// 获取用户选中的值（下标）
				console.log(event.detail.value)
				this.curFeeType = event.detail.value
				// 发请求，传递缴费类型
				this.requestFeeRecord()
			},
			monthChange(event) {
				console.log(event.detail.value)
				this.curMonth = event.detail.value
				// 发请求
				this.requestFeeRecord()
			},
			// 将请求缴费记录并且传参封装成一个函数
			async requestFeeRecord() {
				// 声明变量保存开始时间戳
				var startTime = 0
				// 声明变量保存结束时间戳
				var endTime = 0
				// 分别获取年份和月份
				var arr = this.curMonth.split('-')
				// 判断是否为年月
				if(arr.length === 2) {
					// 获取这个月开始的时间戳
					startTime = new Date(arr[0],arr[1]-1).getTime()
					// 获取这个月结束的时间戳
					endTime = new Date(arr[0],arr[1]).getTime()-1
				}
				//发请求
				this.records = await feeRecord(this.curFeeType,startTime,endTime)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-navbar {
		display: block;
		// ::v-deep 样式穿透
		::v-deep .uni-navbar__content {
			display: block;
		}
	}
	.picker {
		background-color: $uni-bg-color;
		margin: $uni-spacing-col-lg*2 0 0 $uni-spacing-row-lg;
		border-radius: $uni-border-radius-lg*3;
		width: $uni-font-size-base*6.8;
		.picker-content {
			padding: $uni-spacing-col-sm $uni-spacing-row-base;
			align-items: center;
			.txt {
				font-size: $uni-font-size-base;
				color: $zh-theme-grey-light;
				flex: 1;
			}
		}
	}
	.record {
		flex-direction: column;
		.record-content {
			width: 100%;
		}
	}
	.no-record {
		text-align: center;
		color: $zh-theme-grey;
		margin-top: $uni-spacing-col-lg*10;
	}
</style>
